@charset "UTF-8";

/**
 * @desc 包括常用的mixin, %, @function
 * mixin，通过@include调用，样式通过拷贝的方式使用，尤其适用于传递参数
 * %，通过@extend调用，样式通过组合申明的方式使用，适用于不传参数的代码片段
 * @function，返回一个值，用于调用
 * @author 大志
 * @update kyle
 * @date 2019-07-29
 */

/* 主题色
------------------------------------------------------------------ */
/* 字体主色*/
@mixin color-primary($color: $primary1) {
  color: $color;
  @each $primary, $font-color in $primaryList {
    [data-theme='#{$primary}'] & {
      color: #{$font-color};
    }
  }
}
/* 字体辅色*/
@mixin color-second($color: $second1) {
  color: $color;
  @each $primary, $font-color in $secondList {
    [data-theme='#{$primary}'] & {
      color: #{$font-color};
    }
  }
}
/* 背景主色*/
@mixin bg-primary($color: $primary1) {
  background-color: $color;
  @each $primary, $bg-color in $primaryList {
    [data-theme='#{$primary}'] & {
      background-color: #{$bg-color};
    }
  }
}
/* 背景辅色*/
@mixin bg-second($color: $second1) {
  background-color: $color;
  @each $primary, $bg-color in $secondList {
    [data-theme='#{$primary}'] & {
      background-color: #{$bg-color};
    }
  }
}
/* 边框主色*/
@mixin border-primary($direction: color, $color: $primary1) {
  border-#{$direction}: $color;
  @each $primary, $border-color in $primaryList {
    [data-theme='#{$primary}'] & {
      border-#{$direction}: #{$border-color};
    }
  }
}
/* 边框辅色*/
@mixin border-second($direction: color, $color: $second1) {
  border-#{$direction}: $color;
  @each $primary, $border-color in $secondList {
    [data-theme='#{$primary}'] & {
      border-#{$direction}: #{$border-color};
    }
  }
}
/* 边框辅色*/
@mixin border-deepred($direction: color, $color: $second15) {
  border-#{$direction}: $color;
  @each $primary, $border-color in $secondList {
    [data-theme='#{$primary}'] & {
      border-#{$direction}: #{$border-color};
    }
  }
}
/* 1px 边框
 * 为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。
---------------------------------------------------------------- */

%hairline-basic {
  position: relative;
  &:before {
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    transform-origin: left top;
    content: '';
  }
}

/* flex布局
---------------------------------------------------------------- */
/* flex container 相关 */
%flex-basic {
  display: flex;
  display: -webkit-flex;
}

/* 对齐形式 */
@mixin flex-content($justify-content: flex-start, $align-items: stretch) {
  display: flex;
  display: -webkit-flex;
  justify-content: $justify-content;
  align-items: $align-items;
}
@mixin flex-justify() {
  justify-content: space-between;
}

/* 换行 */
%flex-wrap {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

/* 轴方向 */
@mixin flex-direction($direction: column) {
  display: flex;
  display: -webkit-flex;
  flex-direction: $direction;
}

/* flex item 相关*/

/* 定位相关
---------------------------------------------------------------- */
%fixed-basic {
  max-width: 750px;
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
}

/* 文本截断
---------------------------------------------------------------- */

/* 单行截断 */

@mixin ellipsis($extend: true) {
  @if $extend {
    @extend %ellipsis;
  } @else {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

%ellipsis {
  @include ellipsis(false);
}

/* 多行文本截断，存在兼容性问题 only old webkit flex box */

@mixin ellipsis-lines($lines: 2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
}

%ellipsis-lines-2 {
  @include ellipsis-lines();
}

/* 居中相关
---------------------------------------------------------------- */

@mixin translate-center($direction: both) {
  position: absolute;
  @if $direction==both {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  } @else if $direction==x {
    left: 50%;
    transform: translate(-50%, 0);
  } @else if $direction==y {
    top: 50%;
    transform: translate(0, -50%);
  }
}

%translate-center {
  @include translate-center();
}

%translate-h-c {
  @include translate-center('x');
}

%translate-v-c {
  @include translate-center('y');
}

%block-center {
  margin-left: auto;
  margin-right: auto;
}

/* triangle 三角箭头，可采用空元素或伪元素生成，具体定位这里不涉及
---------------------------------------------------------------- */

%triangle-basic {
  display: inline-block;
  height: 0;
  width: 0;
  overflow: hidden;
  vertical-align: middle;
  content: '';
}

@mixin triangle($direction: top, $borderWidth: 8px, $borderColor: currentColor) {
  @extend %triangle-basic;
  @if $direction==top {
    border-bottom: $borderWidth solid $borderColor;
    border-left: $borderWidth solid transparent;
    border-right: $borderWidth solid transparent;
  } @else if $direction==right {
    border-left: $borderWidth solid $borderColor;
    border-top: $borderWidth solid transparent;
    border-bottom: $borderWidth solid transparent;
  } @else if $direction==bottom {
    border-top: $borderWidth solid $borderColor;
    border-left: $borderWidth solid transparent;
    border-right: $borderWidth solid transparent;
  } @else if $direction==left {
    border-right: $borderWidth solid $borderColor;
    border-top: $borderWidth solid transparent;
    border-bottom: $borderWidth solid transparent;
  }
}

/* 方向箭头
---------------------------------------------------------------- */

@mixin v-arrow($direction: right, $borderWidth: 2px, $size: 10px) {
  display: inline-block;
  vertical-align: middle;
  width: $size;
  height: $size;
  opacity: 0.5;
  @if $direction==top {
    border-top: $borderWidth solid currentColor;
    border-right: $borderWidth solid currentColor;
    transform: rotate(-45deg);
  } @else if $direction==right {
    border-top: $borderWidth solid currentColor;
    border-right: $borderWidth solid currentColor;
    transform: rotate(45deg);
  } @else if $direction==bottom {
    border-left: $borderWidth solid currentColor;
    border-bottom: $borderWidth solid currentColor;
    transform: rotate(-45deg);
  } @else if $direction==left {
    border-left: $borderWidth solid currentColor;
    border-bottom: $borderWidth solid currentColor;
    transform: rotate(45deg);
  }
}

/* 选择框样式
---------------------------------------------------------------- */
@mixin chose-box($width: 28px, $height: 28px, $colorBg: $colorBg, $colorBorder: $colorBorder) {
  width: $width;
  height: $height;
  border-radius: 100%;
  background-color: $colorBg;
  border: 1px solid $colorBorder;
  position: relative;
}
